<template>
  <el-dialog
    :title="title"
    :visible.sync="showChild"
    :before-close="beforeClose"
    :close-on-click-modal="false"
    class="user-save-dialog"
  >
    <div class="form-container">
      <el-form :model="user" ref="childForm" label-width="80px" :rules="rules">
        <el-form-item prop="userName" label="用户名" >
          <el-input v-model.trim="user.userName" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="userNickname" label="姓名">
          <el-input v-model.trim="user.userNickname" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input v-model.trim="user.password" placeholder="密码由数字、字母和_下划线组成，长度在6到12位" show-password></el-input>
        </el-form-item>
        <el-form-item prop="rePassword" label="重复密码">
          <el-input v-model.trim="user.rePassword" placeholder="请再次输入密码" show-password></el-input>
        </el-form-item>

      </el-form>
    </div>
    <div slot="footer">
      <el-button type="default" @click="close">取 消</el-button>
      <el-button type="danger" @click="resetForm">重 置</el-button>
      <el-button
        type="success"
        @click="submitForm"
        :loading="changeLoading">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import userAPI from '@/api/system/user'
  import simpleValidate from '@/utils/simpleValidate'
  export default {
    name: "userCommon",
    data() {
      const validPwdLength =(rule,value,callback)=>{
        if(!simpleValidate.validPwd(value)){
          callback(new Error('密码只能由数字、字母和_下划线组成，长度在6到12位 '))
        }else{
          callback()
        }
      }
      const validPwd = (rule,value,callback)=>{
        if(this.user.password !== this.user.rePassword){
          callback(new Error('两次密码不一致'))
        }else{
          callback()
        }
      }

      return {
        user:{
          userId:'',
          userName:'',
          userNickname:'',
          password:'',
          rePassword:''
        },
        rules: {
          userName: [
            {required: true, message: '请输入用户名', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {validator: validPwdLength, trigger: 'blur'}
          ],
          rePassword: [
            {required: true, message: '请再次输入密码', trigger: 'blur'},
            {validator:validPwd,trigger: 'blur'}
          ],
        },
        showChild: false,
        title: '新增用户',
        changeLoading:false,
      }
    },
    created() {
    },
    methods: {
      close(){
        this.resetForm()
        this.showChild = false
      },
      saveOrUpdate() {
        this.changeLoading = true
        const promise = this.user.userId ? userAPI.update(this.user) : userAPI.save(this.user)
        promise.then(res => {
          this.changeLoading = false
          this.$emit('update')
          this.showChild = false
          this.resetForm()
        })

      },
      beforeClose(done){
        this.resetForm()
        done(true)
      },
      open(id) {
        this.showChild = true
        // this.user.userId = id
        if (id) {
          this.title = '编辑用户'
          // this.user = obj
          this.getInfo(id)
        } else {
          this.title = '新增用户'
        }
      },
      getInfo(id){
        userAPI.getById(id).then(res=>{
          this.user = res
          this.user.password = ''
        })
      },
      resetForm(){
        this.$refs['childForm'].resetFields()
      },
      submitForm(){
        this.$refs['childForm'].validate(valid => {
          if (valid && !this.changeLoading) {
            this.saveOrUpdate()
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">

</style>
